<template>
    <div>
        <div
                id="file-name"
        >
            {{name}}
        </div>
        <div style="width: 960px; height: 540px; padding-top: 40px" class="mx-auto">
            <vue-plyr>
                <video :src="videoSrc"></video>
            </vue-plyr>
        </div>
    </div>
</template>

<script>
    export default {
        name: "MyVideo",
        props: {
            name: {
                type: String,
                default: '文件名'
            },
            videoSrc: {
                type: String
            }
        }
    }
</script>

<style scoped>
    #file-name {
        width: 960px;
        height: 50px;
        margin: 0 auto;
        padding-top: 80px;
        font-weight: 600;
    }
</style>